<template>
	<div class="activity-examine">
		<a-scrollbar style="overflow: auto">
            <h4 style="margin-bottom: 24px;">接待审核</h4>
			<a-form :model="form" auto-label-width label-align="left">
				<div class="form-control">
					<div class="form-left">
						<a-row :gutter="24">
                            <a-col :span="8">
                                <a-form-item field="name" label="账号">
                                    <a-input v-model="form.keyword" placeholder="手机号/用户名/用户ID" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item field="name" label="接待计划名称">
                                    <a-input v-model="form.receptionPlanName" placeholder="接待计划名称" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item field="name" label="活动状态">
                                    <a-select v-model="form.receptionStatus" placeholder="全部">
                                        <a-option value="">全部</a-option>
                                        <a-option :value="0">未开始</a-option>
                                        <a-option :value="1">进行中</a-option>
                                        <a-option :value="2">已结束</a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item field="name" label="创建日期">
                                    <a-range-picker
                                        v-model="dateRangeCreate"
                                        format="YYYY-MM-DD"
                                        value-format="timestamp"
                                        :allow-clear="false"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item field="name" label="接待时间">
                                    <a-range-picker
                                        v-model="dateRangeReception"
                                        format="YYYY-MM-DD"
                                        value-format="timestamp"
                                        :allow-clear="false"
                                    />
                                </a-form-item>
                            </a-col>
						</a-row>
					</div>

                    <a-divider direction="vertical" style="height: auto; transform: translateY(-10px);"></a-divider>

					<div class="form-right">
						<a-button type="primary" @click="onSearchClick">查询</a-button>
						<a-button @click="resetForm">重置</a-button>
					</div>
				</div>
			</a-form>
			<div class="form-control">
				<div class="form-left">
					<a-form-item :hide-label="true">
						<a-radio-group v-model="form.deleteStatus" type="button" @change="onSearchClick">
							<a-radio value="0">上架中</a-radio>
							<a-radio value="1">已删除</a-radio>
						</a-radio-group>
					</a-form-item>
				</div>
			</div>
			<a-table
				class="design__table"
				:columns="activityColumns"
				:data="activityData"
				:scroll="{ x: '100%', y: '100%' }"
				:pagination="false"
                @change="handleSort"
			>
				<template #receptionPlanName="{ record }">
                    <a-link @click="linkToOverview(record.id)">{{ record.receptionPlanName }}</a-link>
                </template>
                <template #createDate="{ record }">
                    <span>{{ filterTime(record.createDate) }}</span>
                </template>
				<template #receptionStartDate="{ record }">
					<span>{{ filterTime(record.receptionStartDate) }} 至 {{ filterTime(record.receptionEndDate) }}</span>
				</template>
				<template #receptionPlanStatus="{ record }">
					<span
						class="table-dot"
						:class="[
							record.receptionPlanStatus === 1 ? 'table-dot--green' : '',
							record.receptionPlanStatus === 0 ? 'table-dot--yellow' : '',
							record.receptionPlanStatus === 2 ? 'table-dot--grey' : '',
						]"
					></span>
					<span>{{ activityStatusMaps[record.receptionPlanStatus] }}</span>
				</template>
				<template #operation="{ record }">
					<span
						v-if="!record.isDelete"
						class="operation-item operation-item--red"
						@click="deleteActivity(record.id)"
						>删除</span
					>
					<span v-else class="operation-item" @click="recoverActivity(record.id)">删除恢复</span>
				</template>
			</a-table>
		</a-scrollbar>
		<div class="reception-verify-pagination">
			<a-pagination v-model:current="current" :total="total" show-total @change="getActivityExamineList" />
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, reactive, Ref } from 'vue';
import { activity, errors, interact } from '@/api';
import env from '@/api/config';
import dateFormat from 'ourwill-feutil/common/dateFormat';
import { Message, TableChangeExtra } from '@arco-design/web-vue';
import copyCase from '@/components/caseModule/copyCase.vue';
import { useUserStore } from '@/store';
import { toRefs } from 'vue';
import { computed } from 'vue';

const userStore = useUserStore();
const { isLibraryAdmin, adminInfo } = toRefs(userStore);

const now = new Date().getTime();
const twoMonthsAgo = now - 2 * 30 * 24 * 60 * 60 * 1000;

const form: Ref<{ [key: string]: any }> = ref({
	keyword: '',
	receptionPlanName: '',
    /**
     * 接待计划状态 0未开始 1进行中 2已结束
    */
	receptionStatus: '',
    createStartDate: '',
    createEndDate: '',
    receptionStartDate: '',
    receptionEndDate: '',
    /**
     * 是否删除 0未删除 1已删除
    */
    deleteStatus: '0',
});

/**
 * 创建日期的时间范围
*/
const dateRangeCreate = computed({
    get() {
        return [form.value.createStartDate, form.value.createEndDate]
    },
    set(value) {
        const [start, end] = value || []
        form.value.createStartDate = start;
        form.value.createEndDate = end;
    }
})

/**
 * 接待时间的范围
*/
const dateRangeReception = computed({
    get() {
        return [form.value.receptionStartDate, form.value.receptionEndDate]
    },
    set(value) {
        const [start, end] = value || []
        form.value.receptionStartDate = start;
        form.value.receptionEndDate = end;
    }
})

const resetForm = () => {
	form.value = {
		keyword: '',
        receptionPlanName: '',
        receptionStatus: '',
        createStartDate: '',
        createEndDate: '',
        receptionStartDate: '',
        receptionEndDate: '',
        deleteStatus: '0',
	};
	getActivityExamineList();
};


const activityStatusMaps: any = {
	0: '未开始',
	1: '进行中',
	2: '已结束',
};
const publishStatus: any = {
	0: '未发布',
	1: '发布中',
};
const activityColumns = computed(() => {
	let list: any = [
		{
			title: '接待计划名称',
			slotName: 'receptionPlanName',
			width: 253,
		},
		{
			title: '创建日期',
			slotName: 'createDate',
			width: 303,
		},
		{
			title: '接待人数',
            dataIndex: 'receptionGuestNum',
			width: 187,
            sortable: {
                sortDirections: ['ascend', 'descend']
            }
		},
		{
			title: '接待时间',
			slotName: 'receptionStartDate',
			width: 360,
		},
		{
			title: '接待状态',
			slotName: 'receptionPlanStatus',
			width: 218,
		},
	];
	if ([0, 1].includes(Number(adminInfo.value?.adminType))) {
		list.push({
			title: '操作',
			slotName: 'operation',
			width: 201,
			fixed: 'right',
		});
	}
	return list;
});
const activityData = ref([]);

const total = ref(0);
const current = ref(1);
const onSearchClick = () => {
	current.value = 1;
	getActivityExamineList();
};


const linkToOverview = (planId: number) => {
    console.log("🚀 ~ linkToOverview ~ planId:", planId)
    // window.open(`${env.host}/#/index/home/planManagement/${planId}/overview`)
}

const filterTime = (val: any) => {
	if (!val) {
		return '--';
	}

	return dateFormat(val);
};

const getActivityExamineList = async () => {
	const params: any = {
		...form.value,
        pageNum: current.value,
        pageSize: 10,
	};

	const { ok, data } = await interact.getNewReceptionList(params);
	if (!ok) {
		return;
	}
	activityData.value = data.data.records;
	total.value = data.data.total;
};
getActivityExamineList();
const recoverActivity = async (activityId: number) => {
	const { ok, data } = await activity.recoverActivity(activityId);
	if (!ok) {
		return;
	}
	Message.success('恢复成功');
	getActivityExamineList();
};

const deleteActivity = async (activityId: number) => {
	const { ok, data } = await activity.deleteActivity(activityId);
	if (!ok) {
		return;
	}
	Message.success('删除成功');
	getActivityExamineList();
};

const cancelPublishActivity = async (activityId: number, status: number) => {
	const { ok, data } = await activity.cancelPublishActivity(activityId, status);
	if (!ok) {
		return;
	}
	if (+status === 0) {
		Message.success('取消发布成功');
	} else {
		Message.success('发布成功');
	}
	getActivityExamineList();
};

const gotoActivity = (record: any) => {
	if (!record.id) {
		return;
	}
	let url = `${env.host}/manage/#/index/activityManage/activity/${record.id}`;
	window.open(url, '_blank');
};

const copyToCaseLibrary = async (activityId: number) => {
	if (!isLibraryAdmin.value) {
		Message.error('非案例库管理员，无法复制案例');
		return;
	}
	try {
		const { data, ok } = await activity.addToCaseLibrary({ activityId });
		if (!ok) {
			return;
		}
		Message.success('复制成功');
	} catch (error) {
		errors(error);
	}
};
const handleSort = (_: any, extra: TableChangeExtra) => {
    const { sorter } = extra
    if (sorter) {
        form.value.ticketNumSort = sorter.direction === 'ascend' ? 0 : 1;
    } else {
        form.value.ticketNumSort = null;
    }
    getActivityExamineList();
}

</script>
<style lang="less">
.activity-examine {
    background: #fff;
	min-height: 100%;
	position: relative;
	padding-bottom: 48px;
    padding: 10px;
    
	.form-control {
		display: flex;
		border-bottom: 1px solid #eaeaea;
		margin-bottom: 20px;

		.form-left {
			flex: 1;
		}

		.form-right {
			width: 90px;
			display: flex;
			flex-direction: column;

			align-items: center;
			position: relative;

			// &::before {
			// 	content: '';
			// 	display: block;
			// 	width: 1px;
			// 	height: 134px;
			// 	background: #d9d9d9;
			// 	position: absolute;
			// 	left: 23px;
			// }

			.arco-btn {
				& + .arco-btn {
					margin-top: 20px;
				}
			}
		}
	}
	.design__table {
		.ticket_count_title {
			display: flex;
			align-items: center;
			.icons {
				position: relative;
				display: flex;
				flex-direction: column;
				margin-left: 8px;
				.icon {
					cursor: pointer;
					&.active {
						color: #165dff;
					}
				}
				.icon_top {
					// position: absolute;
					// top: -12px;
				}
				.icon_bottom {
					// position: absolute;
					// bottom: -12px;
				}
			}
		}
	}

    .reception-verify-pagination {
        display: flex;
        justify-content: flex-end;
        margin-top: 12px;
    }

	.activity-name-wraper {
		display: flex;
		align-items: center;
		cursor: pointer;
		span {
			word-break: break-word;
		}
		img {
			margin-right: 16px;
			width: 124px;
		}
	}

	.table-dot {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin-right: 8px;

		&--green {
			background-color: #38ca29;
		}

		&--yellow {
			background-color: #ffb53c;
		}

		&--grey {
			background-color: #bfbfbf;
		}
	}

	.operation-item {
		color: #386cff;
		cursor: pointer;
		font-size: 14px;

		& + .operation-item {
			margin-left: 16px;
		}

		&--disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}

		&--red {
			color: #ff3c3c;
		}
	}
}
</style>
